import React, { useEffect, useState } from 'react';
// import * as echarts from 'echarts';
import {
  Form,
  Input,
  DatePicker,
} from 'antd';
import './style/Dealthink.scss'
import { Menu } from 'antd';
import { Card, Col, Row } from 'antd';
import Modelecharts from '../../../component/Sunecharts'
import { Space, Table, Tag } from 'antd';
const items = [
  {
    label: '今日',
    key: '1',
  },
  {
    label: '昨日',
    key: '2',
  },
  {
    label: '最近七天',
    key: '3',
  },
  {
    label: '最近30天',
    key: '4',
  },

];
const columns = [
  {
    title: '渠道',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '访客数',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '加购人数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '下单人数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '支付人数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '下单单数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '支付单数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '下单 金额（元）',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '客单价（元）',
    dataIndex: 'address',
    key: 'address',
  },

];
const data = [
  {
    key: '1',
    name: '微信商城',
    age: 5000,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: '微信商城',
    age: 5000,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: '微信商城',
    age: 5000,
    address: 'Sidney No. 1 Lake Park',
  },
];
function Dealthink(props) {
  const [list, setList] = useState([
    '4-01', 'dwedsdf', '雪纺衫', '裤子', '高跟鞋', '袜子'
  ])

  const [arrlist, setArrlist] = useState([
    650, 500, 1000, 200, 750, 600
  ])
  const [current, setCurrent] = useState('mail');
  const onClick = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };
  const { RangePicker } = DatePicker;
  const { TextArea } = Input;
  return (
    <div className='dealthink'>

      {/* Dealthink */}
      <div className='top'>
        <div>交易分析</div>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal" >
          <Form.Item label="统计日期：">
            <RangePicker />
          </Form.Item>
        </Form>
        <div>
          <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} className='menu' />
        </div>

      </div>
      <div className="site-card-wrapper">
        <Row gutter={16}>
          <Col span={5}>
            <Card title="支付金额（元）" bordered={false}>
              <h3>126,234</h3>
              <span>较上期</span>
            </Card>
          </Col>
          <Col span={5}>
            <Card title="支付笔数" bordered={false}>
              <h3>1262</h3>
              <span>较上期</span>
            </Card>
          </Col>
          <Col span={5}>
            <Card title="支付人数" bordered={false}>
              <h3>960</h3>
              <span>较上期</span>
            </Card>
          </Col>
          <Col span={5}>
            <Card title="支付客单价" bordered={false}>
              <h3>457</h3>
              <span>较上期</span>
            </Card>
          </Col>
        </Row>
      </div>
      {/* <div id='ordermanage' style={{ width: '1400px', height: '400px' ,borderRadius:'20px'}}>
            
      </div> */}


      {/* chart */}
      <Modelecharts list={list} arrlist={arrlist} style={{ width: '1400px', height: '400px', borderRadius: '20px' }} title='支付金额统计' color1='skyblue' color2='#f5f5f5' />




      <div className="site-card-wrapper">
        <Row gutter={24}>
          <Col span={12}>
            <Card title="支付金额（元）" bordered={false}>
              <h3>126,234</h3>
              <span>较上期</span>
            </Card>
          </Col>
          <Col span={12}>
            <Card title="支付笔数" bordered={false}>
              <h3>1262</h3>
              <span>较上期</span>
            </Card>
          </Col>
        </Row>
      </div>
      <div>
        <Table columns={columns} dataSource={data} />
      </div>
    </div>
  );
}

export default Dealthink;